<!-- 1:学习Flex布局，至少写3个例子 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex案例</title>
		<style>
			#main {
				border: 2px solid red;/* 外框：实线 红色 */
				padding: 10px;/* 距离边框位置 */
				position: relative;
			}

			.row,
			.row_reverse,
			.column,
			.column_reverse {
				display: flex;/* 弹性布局 */
				margin-bottom: 5px;
			}

			.row {
				flex-direction: row;
			}

			.row_reverse {
				flex-direction: row-reverse;
			}

			.column {
				flex-direction: column;
			}

			.column_reverse {
				flex-direction: column-reverse;
				position: absolute;
				top: 120px;
				left: 400px;
			}

			.row div,
			.row_reverse div,
			.column div,
			.column_reverse div {
				width: 50px;
				height: 50px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div class="row">
				<div>A</div>
				<div>B</div>
				<div>C</div>
				<div>D</div>
				<div>E</div>
			</div>
			<div class="row_reverse">
				<div>A</div>
				<div>B</div>
				<div>C</div>
				<div>D</div>
				<div>E</div>
			</div>
			<div class="column">
				<div>A</div>
				<div>B</div>
				<div>C</div>
				<div>D</div>
				<div>E</div>
			</div>
			<div class="column_reverse">
				<div>A</div>
				<div>B</div>
				<div>C</div>
				<div>D</div>
				<div>E</div>
			</div>
		</div>
	</body>
</html>
